<template>
    <div>
        <el-upload class="upload-demo" 
             :action="uploadSetting.action" 
             :limit="uploadSetting.limit"
             :file-list="fileList"
             :before-upload="handleBeforeUpload"
             :on-success="handleUploadSuccess"
            >
            <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
    </div>
</template>


<script>
    export default {
        props:["uploadSetting"],
        data() {
            return {
                fileList: [],
            }
        },
        methods: {
            //上传文件之前
            handleBeforeUpload(file){
                console.log(file)
                //截取文件后缀名
                var fileFinalName = file.name.substring(file.name.lastIndexOf('.') + 1)
                // console.log(this.uploadSetting.filtype.indexOf(fileFinalName))
                if(!this.uploadSetting.filtype.indexOf(fileFinalName)){
                    this.$message.error(`上传文件格式为${this.uploadSetting.filtype}`)
                    return false
                }
                if(this.uploadSetting.fileSize < file.size / 1024 / 1024){
                    this.$message.error(`上传头像图片大小不能超过${this.uploadSetting.fileSize}MB!`)
                    return false
                }
                return true
            },
            //上传文件成功
            handleUploadSuccess(){
                this.$message.success('文件上传成功!')
            },
        }
    }
</script>